<script lang="ts">
  export let products: any[];
</script>

<div class="product-list">
  {#each products as product}
    <div class="product-item">
      <h3>{product.name}</h3>
      <img src={product.mainImage} alt={product.name} />
      <p>价格: ¥{product.price}</p>
      <p>评论数: {product.commentCount}</p>
      <a href={product.url} target="_blank">查看详情</a>
      <div class="variants">
        {#each product.Wraps as variant}
          <img src={variant.thumbnail} alt={variant.title} title={variant.title} />
        {/each}
      </div>
    </div>
  {/each}
</div>

<style>
  .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  .product-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
  }
  .product-item img {
    max-width: 100%;
    height: auto;
  }
  .variants {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .variants img {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    border: 1px solid #ddd;
  }
</style>